<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overlay</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="/i-webmonitor/application/resources/css/smoothness/jquery-ui-1.8.23.custom.css" />


<style>
#selectables div {
width:170px; height:25px;
padding:5px 0 0 10px; margin:10px 0 0 10px;
border:1px solid #000;
}
#sortables { width:300px; }
#sortables div { padding:2px 0 2px 4px; margin-bottom:8px; }

</style>

<script src="/i-webmonitor/application/resources/js/jquery-1.8.0.min.js"
	type="text/javascript"></script>
<script
	src="/i-webmonitor/application/resources/js/jquery-ui-1.8.23.custom.min.js"
	type="text/javascript"></script>

<script type="text/javascript">
$(document).ready( function(){
	$("#selectables").selectable();

	var sortOpts = {
			placeholder: "empty ui-corner-all",
			forcePlaceholderSize: true,
			revert: "slow",
			handle:  "span",
			delay: 1000,
			opacity: 0.5
			};
	$("#sortables").sortable(sortOpts);
});
</script>
</head>


<body>
<div id="selectables">
<div>This div can be selected</div>
<div>This div can be selected</div>
<div>This div can be selected</div>
<div>This div can be selected</div>
<div>This div can be selected</div>
</div>
<div id="sortables" class="ui-widget">
<div class="ui-widget-header ui-corner-all">Sortable 1
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
</div>
<div class="ui-widget-header ui-corner-all">Sortable 2
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
</div>
<div class="ui-widget-header ui-corner-all">Sortable 3
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
</div>
<div class="ui-widget-header ui-corner-all">Sortable 4
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
</div>
<div class="ui-widget-header ui-corner-all">Sortable 5
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
</div>
</div>

</body>
</html>
